import { useEffect, useMemo, useState } from 'react';
import numeral from 'numeral';
type PropField = {
  datas: Record<string, any>[];
  nameCol: string;
  numCol: string;
  pageSize: number;
  interval: number;
  format?: string;
  dCol?: string;
};
const SortList: React.FC<PropField> = (props) => {
  const [page, setPage] = useState(1);
  const [suspend, setSuspend] = useState(false);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setPage((prevPage) => {
        if (suspend) {
          return prevPage;
        }
        const pcount = props.datas.length / props.pageSize;
        if (prevPage >= pcount) {
          return 1;
        } else {
          return prevPage + 1;
        }
      });
    }, props.interval);
    return () => clearInterval(intervalId);
  }, [props.datas.length, props.interval, props.pageSize, suspend]);
  const sortList = useMemo(() => {
    return props.datas
      .sort((a, b) =>
        props.dCol === undefined
          ? b[props.numCol] - a[props.numCol]
          : (a[props.dCol] - b[props.dCol]) * 1000000 + b[props.numCol] - a[props.numCol],
      )
      .map((data, index) => {
        return { ...data, no: index + 1 };
      });
  }, [props.datas, props.dCol, props.numCol]);
  const list = useMemo(() => {
    const start = (page - 1) * props.pageSize;
    const end = page * props.pageSize;
    return sortList.slice(start, end);
  }, [page, props.pageSize, sortList]);
  const maxVal = (sortList[0] ? sortList[0][props.numCol] : 200) * 1.1;
  return (
    <table
      style={{ borderCollapse: 'collapse', margin: 0, padding: 0, width: '100%', border: 0 }}
      onMouseEnter={() => setSuspend(true)}
      onMouseLeave={() => setSuspend(false)}
    >
      {list.map((item) => {
        const index = item.no;
        const color =
          index === 1 ? '#FF0000' : index === 2 ? '#FF9900' : index === 3 ? '#00CC33' : '#2563EB';
        const val = item[props.numCol] < 0 ? 0 : item[props.numCol];
        const percent = '' + (val / maxVal > 1 ? 1 : val / maxVal) * 100 + '%';
        return (
          <tr key={index}>
            <td style={{ border: 0, textAlign: 'left', width: '50px', color: color }}>No{index}</td>
            <td
              style={{
                border: 0,
                textAlign: 'left',
                width: '140px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {item[props.nameCol]}
            </td>
            <td style={{ border: 0, width: '200px', textAlign: 'center' }}>
              <div
                style={{
                  width: '100%',
                  backgroundColor: '#E5E7EB',
                  height: '10px',
                  textAlign: 'center',
                  borderRadius: '9999px',
                }}
              >
                <div
                  style={{
                    width: percent,
                    backgroundColor: color,
                    height: '10px',
                    borderRadius: '9999px',
                  }}
                />
              </div>
            </td>
            <td style={{ border: 0, width: '50', textAlign: 'left' }}>
              {numeral(item[props.numCol]).format(props.format)}
            </td>
          </tr>
        );
      })}
    </table>
  );
};
export default SortList;
SortList.defaultProps = {
  format: '0,0',
};
